@extends('home._layout.default')


@section('header_css')
    <style>
        .hot-label{text-overflow: ellipsis;overflow: hidden;white-space:nowrap;width: 100%;display: inline-block}
        .hot-img-div{padding-right: 8px;padding-left: 8px;}
        .hot-img{max-width: 100px;max-height: 150px;border-radius: 1%;}
    </style>
@endsection

@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            @foreach($hots as $hot)
            <div class="col-sm-3">
                <div class="contact-box">
                    <a href="{{route('home', ['class' => 'hot', 'action' => 'detail','id' => $hot->id ])}}">
                        <div class="col-sm-5 hot-img-div">
                            <div class="text-center">
                                <img alt="image" class="img-circle hot-img m-t-xs img-responsive" src="{{$hot['thumb']}}">
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <h3 class="hot-label">{{$hot['country_name']}}|<strong>{{$hot['title']}}</strong></h3>
                            <address>
                                <span class="hot-label">导演:{{$hot['director']}}</span>
                                <span class="hot-label">编剧:{{$hot['screenwriter']}}</span>
                                <span class="hot-label">主演:{{$hot['main_performer']}}</span>
                                <span class="hot-label">片长:{{$hot['long']}}</span>
                                <span class="hot-label">上映日期:{{$hot['show_time']}}</span>
                            </address>
                        </div>
                        <div class="clearfix"></div>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
@endsection


@section('footer_script')
    <script>
        $(document).ready(function(){$(".contact-box").each(function(){animationHover(this,"pulse")})});
    </script>
@endsection

